<template>
  <div class="permission_container">
    <el-card>
      <el-row :gutter="10">
        <el-col :span="8" :offset="0">
          <el-button type="primary" icon="Plus" size="default" @click="addPermission">添加权限</el-button>
          <el-button type="primary" icon="Delete" size="default" @click="deletePermission">删除权限</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData" ref="tableRef" v-loading="tableLoading" @selection-change="handleSelectionChange" style="width: 100%; margin-bottom: 20px" row-key="id" highlight-current-row border default-expand-all>
        <!-- label列名  prop对应对象中的key -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="authName" label="权限名称" width="300" sortable />
        <el-table-column prop="path" label="地址" width="150" />
        <el-table-column prop="isButton" label="类型" width="150">
          <template #default="scope">
            <el-tag v-if="!scope.row.isButton">菜单</el-tag>
            <el-tag v-if="scope.row.isButton" type="success">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="icon" label="图标" width="150" />
        <el-table-column prop="action" label="按钮操作" width="150" />
        <el-table-column prop="linkUrl" label="地址" width="150" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" icon="Edit" type="primary" @click="showEditDialog(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" icon="Delete" type="danger" @click="deletePermissionByIds(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <permission-dialog :dialogVisible="dialogVisible" :isCreate="isCreate" :permissionForm="permissionForm" :permissionList="menuList" @closePermission="closePermission" @refreshPermissionList="refreshPermissionList"></permission-dialog>
  </div>
</template>
<script>
export default {
  name: "Permission",
};
</script>
<script setup>
import { ref, reactive, getCurrentInstance, onMounted, useSSRContext } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getMenus, deletePermissionsById, getPermissionById } from "network/permissions.js";
import { messageUtils } from "assets/js/messageUtils.js";
import PermissionDialog from "./PermissionDialog";

const { proxy } = getCurrentInstance();
const store = useStore();
const router = useRouter();
const tableData = ref([]);
const tableLoading = ref(false);
const selectedRows = ref([]);
const dialogVisible = ref(false);
const isCreate = ref(false);
const permissionForm = ref({
  authName: "",
  path: "",
  sort: "",
  icon: "",
  componentName: "",
  parentId: "",
  action: "",
  isButton: false,
  linkUrl: "",
});
const menuList = ref([]);

const getPermissionList = async () => {
  tableLoading.value = true;
  const res = await getMenus("tree");
  if (!res.success) {
    proxy.$notify.error({ message: res.msg, showClose: true });
    tableLoading.value = false;
    tableData.value = [];
    return;
  }
  tableData.value = res.response;
  tableLoading.value = false;
};
onMounted(() => {
  getPermissionList();
});
//选中行发生变化时触发
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};
//删除权限
const deletePermission = async () => {
  if (selectedRows.value.length <= 0) return proxy.$notify.error({ message: "请选择要删除的数据", showClose: true });

  let selectedIds = selectedRows.value.map((c) => c.id);
  messageUtils.ElMessageBoxDeleteTips(deletePermissionsById, getPermissionList, proxy, selectedIds);
};
//根据id删除角色
const deletePermissionByIds = async (index, row) => {
  let id = [];
  id.push(row.id);
  messageUtils.ElMessageBoxDeleteTips(deletePermissionsById, getPermissionList, proxy, id);
};
//打开添加权限的对话框
const addPermission = async () => {
  const res = await getPermissionById("00000000-0000-0000-0000-000000000000");
  if (!res.success) return proxy.$notify.error({ message: res.msg, showClose: true });
  //为权限信息和菜单列表赋值

  menuList.value = res.menuList;
  dialogVisible.value = true;
  isCreate.value = true;
};
//打开修改权限的对话框
const showEditDialog = async (index, row) => {
  const res = await getPermissionById(row.id);
  if (!res.success) return proxy.$notify.error({ message: res.msg, showClose: true });
  //为权限信息和菜单列表赋值
  permissionForm.value = res.permission;
  menuList.value = res.menuList;
  isCreate.value = false;
  dialogVisible.value = true;
};
//关闭权限对话框
const closePermission = () => {
  dialogVisible.value = false;
  permissionForm.value = {
    authName: "",
    path: "",
    sort: "",
    icon: "",
    level: 0,
    componentName: "",
    parentId: "",
    action: "",
    isButton: false,
    linkUrl: "",
  };
};
//刷新表格
const refreshPermissionList = () => {
  getPermissionList();
};
</script>
<style lang="less" scoped></style>
